<template>
  <w-modal
    ref="WModal"
    title="银行卡识别"
    :ok-text="identifyData ? '清除' : '识别'"
    :ok-type="identifyData ? 'danger' : 'primary'"
    @ok="okClick"
  >
    <image-up ref="WImageUp" />
    <br>
    <div v-if="identifyData">
      <a-row>
        <a-col span="4">
          所属银行
        </a-col>
        <a-col span="20">
          {{ identifyData.bank_name }}
        </a-col>
      </a-row>
      <a-row>
        <a-col span="4">
          到期时间
        </a-col>
        <a-col span="20">
          {{ identifyData.valid_date }}
        </a-col>
      </a-row>
      <a-row>
        <a-col span="4">
          银行卡号
        </a-col>
        <a-col span="20">
          {{ identifyData.bank_card_number }}
        </a-col>
      </a-row>
    </div>
  </w-modal>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Api } from '@/config/api'
import ImageUp from '@/components/global/imageUp/server'
import WModal, { ModalComType } from '@/components/global/modal'

@Component({
  name: 'WebToolImageIdentifyBackcard',
  components: {
    ImageUp,
    WModal
  }
})
export default class WebToolImageIdentifyBackcard extends Vue {
  // 识别出的文字
  identifyData = null;

  // 图片识别按钮点击
  imageInentify () {
    (this.$refs.WModal as ModalComType).showLoading();
    (this.$refs.WImageUp as any)
      .upImage()
      .then((data: any) => {
        this.$wAxios
          .$post(Api.baidu.bankcardIdentify, {
            localPath: data.filepath
          })
          .then((data) => {
            if (data.result) {
              this.identifyData = data.result
            } else {
              this.$message.error('没有识别出')
            }
          })
          .catch(() => {
            this.identifyData = null
          })
          .finally(() => {
            (this.$refs.WModal as ModalComType).hideLoading()
          })
      })
      .catch((err: any) => {
        this.$message.error(err.msg);
        (this.$refs.WModal as ModalComType).hideLoading()
      })
  }

  /**
   * 显示弹窗
   */
  show () {
    (this.$refs.WModal as ModalComType).show()
  }

  /**
   * 清除按钮点击
   */
  clear () {
    this.identifyData = null;
    (this.$refs.WImageUp as any).clear()
  }

  okClick () {
    if (this.identifyData) {
      this.clear()
    } else {
      this.imageInentify()
    }
  }
}
</script>

<style scoped></style>
